<template>
  <el-card shadow="never" class="card-box">
    <!--    查询-->
    <el-form :model="queryForm" style="margin-left: 100px; margin-top: 20px" label-width="90px">
      <el-row :gutter="20">
        <el-col :sm="24" :md="12" :lg="10" :xl="10">
          <el-form-item label="时间查询">
            <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="To"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                size="default"
                value-format="YYYY-MM-DD"
                @calendar-change="dateChange"
                :disabled-date="disabledDate"
            />
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="10" :xl="10">
          <el-form-item label-width="0">
            <el-button type="primary" @click="onSearch">
              <el-icon>
                <ele-search/>
              </el-icon>
              <span class="search-btn__left">查询</span>
            </el-button>
            <el-button @click="onReset">
              <el-icon>
                <ele-refresh/>
              </el-icon>
              <span class="search-btn__left">重置</span>
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row type="flex" justify="space-evenly" style="align-items: center" align="middle" :gutter="10">
      <el-col :span="4" :sm="12" :md="8" :lg="4" :xl="4">
        <div class="grid-content bg-purple">
          <div>
            <el-text line-clamp="1" size="default">{{ IndexDataCount.crawlerDataCount }}</el-text>
          </div>
          <div style="margin-top: 20px">
            <el-text line-clamp="1" size="large">已采集总计</el-text>
          </div>
        </div>
      </el-col>
      <el-col :span="4" :sm="12" :md="8" :lg="4" :xl="4">
        <div class="grid-content bg-purple">
          <div>
            <el-text line-clamp="1" size="default">{{ IndexDataCount.articleDataCount }}</el-text>
          </div>
          <div style="margin-top: 20px">
            <el-text line-clamp="1" size="large">已发布总计</el-text>
          </div>
        </div>
      </el-col>
      <el-col :span="4" :sm="12" :md="8" :lg="4" :xl="4">
        <div class="grid-content bg-purple">
          <div>
            <el-text line-clamp="1" size="default">{{ IndexDataCount.topicsDataCount }}</el-text>
          </div>
          <div style="margin-top: 20px">
            <el-text line-clamp="1" size="large">专题总计</el-text>
          </div>
        </div>
      </el-col>
      <el-col :span="4" :sm="12" :md="8" :lg="4" :xl="4">
        <div class="grid-content bg-purple">
          <div>
            <el-text line-clamp="1" size="default">{{ IndexDataCount.expertsDataCount }}</el-text>
          </div>
          <div style="margin-top: 20px">
            <el-text line-clamp="1" size="large">专家总计</el-text>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-evenly" style="align-items: center" align="middle" :gutter="10">
      <el-col :span="10" :sm="24" :md="24" :lg="10" :xl="10">
        <VerticalBar :data="crawlerData"/>
      </el-col>
      <el-col :span="10" :sm="24" :md="24" :lg="10" :xl="10">
        <RadarBar :data="topicArticleData"/>
      </el-col>
    </el-row>
  </el-card>
</template>

<script lang="ts" setup>
import {getCrawlerDataByYear, getTopicArticleCount, getIndexDataCount} from "@/api/app";
import {ref} from "vue";
import VerticalBar from "@/components/ReEcharts/VerticalBar.vue";
import RadarBar from "@/components/ReEcharts/RadarBar.vue";
import {IndexCrawlerDataVo, IndexTopicArticleVo} from "@/store/types";
import moment from 'moment';

const crawlerData = ref<IndexCrawlerDataVo[]>([]);
const topicArticleData = ref<IndexTopicArticleVo[]>([]);


const value1 = ref([
  moment().add(-6, 'd').format('YYYY-MM-DD'),
  moment().format('YYYY-MM-DD')
])

let startDate: any = null;
const dateChange = (value: any) => {
  startDate = new Date(value);
}
const disabledDate = (time: any) => {
  const currentDay = new Date()
  return time.getTime() > currentDay.getTime();
}
/** 查询*/
let queryForm = ref({})

const IndexDataCount = ref({});

const onSearch = () => {
  queryForm.value.startDate = value1.value[0];
  queryForm.value.endDate = value1.value[1];
  console.log(value1.value, 'value1.value')
  getCrawlerData();
}

// 重置
const onReset = () => {
  queryForm.value = {}
  getCrawlerData();
}

const indexData = async () => {
  const res = await getIndexDataCount();
  IndexDataCount.value = res;
}

const getCrawlerData = async () => {
  const res = await getCrawlerDataByYear({
    ...queryForm.value,
    startDate: value1.value[0],
    endDate: value1.value[1]
  });
  crawlerData.value = res;
}
const getTopicArticleData = async () => {
  const topicArticleCount = await getTopicArticleCount();
  topicArticleData.value = topicArticleCount;
}

indexData();
getCrawlerData();
getTopicArticleData();

</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }

}

.el-col {
  border-radius: 4px;
  margin: 10px;
}


.bg-purple {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.grid-content {
  border-radius: 4px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.row-bg {
  padding: 10px 0;
  background-color: #FFFFFF;
}
</style>
